import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Row, Col, Form, Modal, Select } from 'antd';

import request from '@/utils/request';

const { Option } = Select;
const { info } = Modal;
const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

// 判断空对象
const isEmptyObject = obj => {
  if (Object.keys(obj).length === 0) {
    return true;
  }
  return false;
};

function DealModeCfg(props) {
  const { getFieldDecorator } = props.form;
  const [dealModeList, SetDealModeList] = useState([]); // 处理模式

  // 初始化数据
  useEffect(() => {
    initData();
  }, [props.selectRecord]);

  const initData = () => {
    const tempDealModeList = [
      {
        name: '抢单',
        value: '1000',
      },
      {
        name: '会签',
        value: '1100',
      },
    ];
    SetDealModeList(tempDealModeList);

    if (!isEmptyObject(props.selectRecord)) {
      props.form.setFieldsValue({
        operMode: props.selectRecord.operMode,
      });
    }
  };

  const handleOk = async () => {
    try {
      await props.form.validateFields();
    } catch (error) {
      info({ title: '请确认', content: '请确认必填字段已填写！' });
      return;
    }

    const formData = props.form.getFieldsValue();
    const submitData = Object.assign(
      {
        flowNodeId: props.selectRecord.flowNodeId,
      },
      formData
    );

    let isSuccess;
    request('pmc/pms/pmOrderFlowNode/updateOperMode', {
      data: submitData,
    }).then(res => {
      if (res.success && res.success === true) {
        props.handleDealModeVisible(false);
        props.handleDealModeCallBack();
        isSuccess = true;
      } else {
        info({ title: '提交失败', content: res.errMessage });
        isSuccess = false;
      }
    });
    props.handleDealModeVisible(false);
    props.handleDealModeCallBack();
    return isSuccess;
  };

  // 通过‘x’关闭弹窗
  const handleCancel = () => {
    const { handleDealModeVisible } = props;
    handleDealModeVisible(false);
  };

  return (
    <Modal
      title="设置处理模式"
      visible={props.modalVisible}
      width="60%"
      onCancel={() => {
        handleCancel();
      }}
      onOk={() => {
        handleOk();
      }}
    >
      <Form style={{ marginBottom: 10 }}>
        <Row>
          <Col span={20}>
            <FormItem label="处理模式" {...formItemLayout}>
              {getFieldDecorator('operMode')(
                <Select
                  placeholder="请选择处理模式"
                  style={{ width: '100%' }}
                  showSearch
                  allowClear={true}
                >
                  {dealModeList.length
                    ? dealModeList.map(item => {
                        return (
                          <Option value={item.value} key={item.value}>
                            {item.name}
                          </Option>
                        );
                      })
                    : null}
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
}

export default connect(() => ({}))(Form.create()(DealModeCfg));
